<template>
  <view class="exam">
    <uni-nav-bar :title="examPaperName" leftIcon="icon-fanhui" rightIcon="true" @clickLeft="$back()">
    </uni-nav-bar>
    <block v-if="this.topicList.length>0">
      <scroll-view scroll-y class="scrollheight">
        <view class="question" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend">
          <view class="stem">
            {{this.topicList[this.current].topicTypeName}}
          </view>
          <viewTopic v-if="this.topicList[this.current]" :optionData="optionData" :topicObj="this.topicList[this.current]"></viewTopic>
        </view>
      </scroll-view>
      <view class="footer u-f-jsb u-f-ac">
        <view class="" @click="showBottomMask">
          <span class="iconfont icon-lunwentimu"></span>
          <text>(<span class="blue">{{current+1}}</span>/{{total}})</text>
        </view>
        <view class="u-f">
          <view class="prev btn marginright10" v-if="current+1>1" @click="toPrev">
            上一题
          </view>
          <view class="btn marginright10" v-if="current+1<total" @click="toNext">
            下一题
          </view>
          <view class="btn submit" @click="submit" v-if="this.topicList[this.current].scored&&studentExamPaperStatus!==2">
            确认评分
          </view>
        </view>

      </view>
      <uni-popup ref="popShare" type="center">
        <uni-popup-message title="提示" message="确认评分后无法再次评分，是否确认评分" @close="close"></uni-popup-message>
      </uni-popup>
      <view class="fixed" @click="showRightMask">题目解析
        <span class="iconfont icon-youshuangjiantou"></span>
      </view>
      <sliderBottom :show.sync="isBottomMask" :current.sync="current" :total="topicList.length"></sliderBottom>
      <sliderRight :detail="{videoUrl:topicList[current].videoUrl?topicList[current].videoUrl:'',answerAnalysis:topicList[current].answerAnalysis,knowList:topicList[current].knowledgePoint}"
        :show.sync="isRightMask"></sliderRight>
    </block>
    <block v-if="topicList.length==0">
      <no-thing></no-thing>
    </block>
    <loading v-if="isloading"></loading>
  </view>
</template>

<script>
  import sliderRight from '@/components/sliderRight.vue'
  import sliderBottom from '@/components/sliderBottom.vue'
  import viewTopic from '@/components/view-topic/view-topic.vue'
  import noThing from "@/components/comm/no-thing.vue"
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import {
    topicType
  } from '@/utils/model.js'
  export default {
    computed: { ...mapState(['isConnected', 'doTopicList', 'token', 'userInfo'])
    },
    components: {
      sliderRight,
      sliderBottom,
      viewTopic,
      noThing
    },
    data() {
      return {
        // 显示右边侧栏题目解析
        isRightMask: false,
        //显示底部侧栏选项
        isBottomMask: false,
        flag: 0,
        lastX: 0,
        lastY: 0,
        type: 0,
        current: 0,
        total: 0,
        topicList: [{
          sort: 1
        }],
        examPaperName: '',
        optionData: [],
        isloading: true,
        topicType,
        studentExamPaperStatus: 1
      };
    },
    async onLoad(option) {
      this.id = parseInt(option.id)
      this.getExamTopicList()
      uni.$on('saveOptionData', this.saveOptionData)
    },
    destroyed() {
      uni.$off('saveOptionData')
    },
    methods: {
      ...mapMutations(['setDoTopicList']),
      saveOptionData(data) {
        let obj = {
          "topicId":this.topicList[this.current].id,
          "id": '',
          "score": "",
          ...data
        }
        console.log(data)
        let index = this.optionData.findIndex(item => item.id === obj.id && item.sort === obj.sort)
        if (index > -1) { //已做过
          this.optionData.splice(index, 1, obj)
        } else {
          //未做过
          this.optionData.push(obj)
        }
        this.$set(this.topicList[this.current].examPaperTopicDTOS[obj.sort - 1], 'score', obj.score)
        console.log(this.optionData)
      },
      // 获取已完成题目
      async getExamTopicList() {

        let obj = this.doTopicList.find(item => item.id == this.id);
        if (!this.isConnected && obj) {
          // console.log(obj.topicList)
          this.total = obj.total
          this.examPaperName = obj.examPaperName
          this.topicList = obj.topicList
        } else if (this.isConnected) {

          let result = await this.$http.get(`/examPaper/student`, {
            params: {
              examPaperId: this.id,
              stuId: this.userInfo.id
            }
          })
          // console.log(result.data.studentExamPaperStatus)
          if (result.status === 1) {
            this.$showToast(result.msg)
            return false
          }
          this.studentExamPaperStatus = result.data.studentExamPaperStatus
          this.examPaperName = result.data.examPaperName
          let testList = []
          result.data.models.forEach(item => {
            testList = [...testList, ...item.topics]
          })

          testList.forEach(item => {
            item.num = 0
            // item.title = item.topicTitle
            // item.topicTitle = item.topicTitle.replace(/(___[0-9]___)/g, '___')
            if ([this.topicType.multipleTopic, this.topicType.mixTopic, this.topicType.simple].includes(item.topicTypeId)) {
              item.examPaperTopicDTOS.forEach((obj, i) => {
                obj.num = i + 1

                if (obj.studentTopicInfos && obj.studentTopicInfos.length > 0) {
                  obj.score = obj.studentTopicInfos[0].score>=0 ? obj.studentTopicInfos[0].score : ''
                }

              })
            }

          })
          this.topicList = testList
          this.total = this.topicList.length
          // console.log(this.optionData)

          // console.log(this.topicList[this.current])
          this.topicList.length > 0 && this.setDoTopicList([{
            id: this.id,
            total: this.total,
            examPaperName: this.examPaperName,
            topicList: this.topicList
          }, 'update'])
        } else {
          this.$showToast('未联网无数据')
          this.topicList = []
        }
        this.isloading = false
      },
      // 点击显示底部选项遮罩层
      showBottomMask() {
        this.isBottomMask = !this.isBottomMask
      },
      // 点击显示题目解析遮罩层
      showRightMask() {
        this.isRightMask = true
      },
      // 交卷事件
      submit() {
        this.$refs.popShare.open()
      },
      async close(e) {
        console.log(e)
        if (e.confirm) {
          console.log(`/makeExamPaper/score`,this.optionData)
          //交卷操作
          let result = await this.$http.put(`/makeExamPaper/score`, this.optionData)
          console.log(result)
          this.topicList[this.current].scored=false
          // if (result.status == 0) {
          //   this.$back()
          // }
        }
      },
      // 上一题
      toPrev() {
        if ((this.current + 1) <= 1) {
          return false;
        }
        this.current--;

      },
      // 下一题
      toNext() {
        if ((this.current + 1) >= this.total) {
          return false;
        }
        this.current++;

      },
      // 上下滑动/左右滑动
      handletouchmove: function(event) {
        // console.log(event)
        if (this.flag !== 0) {
          return;
        }
        let currentX = event.touches[0].clientX;
        let currentY = event.touches[0].clientY;
        let tx = currentX - this.lastX;
        let ty = currentY - this.lastY;
        this.mindex = -1;
        //左右方向滑动
        if (Math.abs(tx) > Math.abs(ty) && Math.abs(ty) < 10) {
          if (tx > 30) {
            console.log('left')
            this.current + 1 > 1 && this.toPrev()
            this.flag = 2;
          } else if (tx < -30) {
            console.log('right')
            this.flag = 1;
            this.current + 1 < this.total && this.toNext()
            //  this.getList();  //调用列表的方法
          }
        }

        //将当前坐标进行保存以进行下一次计算
        this.lastX = currentX;
        this.lastY = currentY;
      },
      handletouchstart: function(event) {
        // console.log(event)
        this.lastX = event.touches[0].clientX;
        this.lastY = event.touches[0].clientY;
      },
      handletouchend: function(event) {
        this.flag = 0;
      },
    }
  }
</script>

<style lang="scss">
  .exam {
    min-height: 100%;
    background-color: $bg_color;

    .scrollheight {
      max-height: calc(100vh - var(--status-bar-height) - 20vh);
    }

    .blue {
      color: $global-color;
    }

    .icon-lunwentimu {
      font-size: px2vw(40);
      margin-right: px2vw(10);
    }

    .fixed {
      @include fixed
    }

    .footer {
      // position: fixed;
      // bottom: 0;
      // width: 100%;
      // box-sizing: border-box;
      padding: px2vw(32);

      .prev {
        color: #00A2F7;
        background: #F5F6FA;
        border: 1px solid #00A2F7;
      }

      .btn {
        box-shadow: none;
      }

      .submit {
        background-color: #F55555;
      }
    }

    .question {
      background-color: #ffffff;
      min-height: px2vh(850);
      font-size: px2vw(28);
      margin: px2vw(32);

      .stem {
        padding: px2vw(16);
        font-size: px2vw(30);
      }
    }
  }
</style>
